body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header, footer { background: #333; color: #fff; padding: 10px; }
nav a { color: #fff; margin: 0 10px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { padding: 20px; }
.search-bar { margin-bottom: 10px; }
.categories button { margin-right: 5px; }
.product-card { display: inline-block; border: 1px solid #ccc; margin: 10px; padding: 10px; width: 180px; vertical-align: top; }
.product-card img { width: 100px; height: 100px; }
#cartList, #checkoutList { margin: 20px 0; }
.cart-item { border-bottom: 1px solid #ccc; padding: 10px 0; }
.banner { width: 100%; height: 260px; position: relative; overflow: hidden; margin-bottom: 20px; background: #000; }
.carousel { position: relative; width: 100%; height: 260px; overflow: hidden; border-radius: 10px; }
.carousel-img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; left: 0; top: 0; display: none; transition: opacity 0.5s;
}
.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.3); color: #fff; border: none; font-size: 28px;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 2;
}
.carousel-btn.left { left: 20px; }
.carousel-btn.right { right: 20px; }
.carousel-btn:hover { background: rgba(0,0,0,0.6); }

nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
#logoutBtn {
    background: #e4393c;
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}
#logoutBtn:hover {
    background: #b7271e;
}
#welcomeUser {
    margin-left: 10px;
    color: #e4393c;
}